<template>
    <div class="p-8 main">
        <el-form :model="formData" :rules="rules" ref="formRef" class="form">
            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="formData.realName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="formData.mobile" type="number" maxlength="11" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="会员类型" prop="memberType">
                <el-radio-group v-model="formData.memberType">
                    <el-radio-button :label="0">线下会员</el-radio-button>
                    <el-radio-button :label="1">线上会员</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否付费" prop="payType">
                <el-radio-group v-model="formData.memberType">
                    <el-radio-button :label="0">未付费</el-radio-button>
                    <el-radio-button :label="1">已付费</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button @click="cancel">取消</el-button>
                <el-button @click="submit" type="primary">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import router from '@/Router';
import request from '@/Utils/request';
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
import { reactive, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const formData = reactive<any>({
    memberType: 0,
    mobile: '',
    payType: 0,
    realName: ''
});

const route = useRoute();

const formRef = ref<FormInstance>();

const rules = reactive<FormRules>({
    realName: [
        {
            required: true,
            message: '请输入真实姓名'
        }
    ],
    mobile: [
        {
            required: true,
            message: '请输入手机号码'
        }
    ]
});

const cancel = async () => {
    try {
        await ElMessageBox.confirm(
            '确认取消吗？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        router.back();
    } catch (error) {
        console.warn('error: ', error);
    }
};

const submit = async () => {
    try {
        await formRef.value!.validate();
        await request({
            method: 'post',
            url: '/memberInfo/save',
            contentTypeIsForm: false,
            data: {
                ...formData,
                id: route.params.id
            },
            showLoading: {},
            errorToast: true
        });
        ElMessage({
            message: '保存成功',
            type: 'success'
        });
        router.back();
    } catch (error) {
        
    }
};

// 获取会员信息
const getUserInfo = async () => {
    const userInfo = await request({
        url: '/memberInfo/getOneById',
        method: 'post',
        data: {
            id: route.params.userId
        },
        contentTypeIsForm: true,
        showLoading: {},
        errorToast: true
    });
    Object.keys(userInfo).forEach(key => {
        formData[key] = userInfo[key];
    });
};

onMounted(() => {
    if (Number(route.params.userId) > 0) {
        getUserInfo();
    }
});
</script>